<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="comment-container" class="ui teal segment">
    <div th:fragment="commentList">
        <!--                留言列表-->
        <div class="ui threaded comments" style="max-width: 100%">
            <h3 class="ui dividing header">评论</h3>

            <div class="comment" th:each="comment : ${comments}">
                <a class="avatar">
                    <img src="https://picsum.photos/id/1/100/100" th:src="@{${comment.avatar}}">
                </a>
                <div class="content">

                    <a class="author" >
                        <span th:text="${comment.nickname}">Matt</span>
                        <div class="ui mini basic teal left pointing label">博主</div>
                    </a>
                    <div class="metadata">
                                    <span class="date"
                                          th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                    </div>
                    <div class="text" th:text="${comment.content}">
                        How artistic!
                    </div>
                    <div class="actions">
                        <a class="reply" data-commentid="1" data-commentnickname="Matt"
                           th:attr="data-commentid=${comment.id}, data-commentnickname=${comment.nickname}"
                           onclick="reply(this)">回复</a>
                    </div>

                </div>
                <!--                                每条评论的第二层级-->
                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                    <div class="comment" th:each="reply : ${comment.replyComments}">
                        <a class="avatar">
                            <img src="https://picsum.photos/id/1/100/100" th:src="@{${reply.avatar}}">
                        </a>
                        <div class="content">
                            <a class="author">
                                <span th:text="${reply.nickname}">Mark</span><span
                                    th:text="'@'+${reply.parentComment.nickname}"
                                    class="m-teal">@John</span>
                            </a>
                            <div class="metadata">
                                            <span class="date"
                                                  th:text="${#dates.format(reply.createTime, 'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                            </div>
                            <div class="text" th:text="${reply.content}">
                                How artistic!
                            </div>
                            <div class="actions">
                                <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                   th:attr="data-commentid=${reply.id}, data-commentnickname=${reply.nickname}"
                                   onclick="reply(this)">回复</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
<script async id="chevereto-pup-src" src="https://imgchr.com/sdk/pup.js" data-url="https://imgchr.com/upload" data-auto-insert="bbcode-embed-medium"></script>
</body>
</html>